<template>
    <div class="messages" ref="messages">
        <div class="message" v-for="message in message" :key="message">
            <el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></el-avatar>
            <div class="messageRight">
                <div class="info">
                    <div>玩原神的pb</div>
                    <div>2022-10-6 13:56:14</div>
                </div>
                <div class="talk">倒不用再拉主分支，你们直接地多负己的多负少自己的分接地多负少自己的多负少自己的分接地多负少自己的多负少自己的分多负少自己的分支上改就是，account实体不用就是</div>
            </div>
            <div class="sjinfo">
                <el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></el-avatar>
                <div>新旺角茶餐厅</div>
            </div>
        </div>
    </div>
</template>

<style>
    /* body{
        height: 2000px;
    } */
    .messages {
        display: flex;
        flex-direction: column-reverse;
        justify-content: flex-start;
        align-items: flex-start;
        overflow-y: scroll;
    }
    .messages .message:first-of-type {
        margin-bottom: 130px;
    }
    .el-avatar{
        margin-top: 10px;
        margin-left: 10px;
    }
    .message{
        width: 1200px;
        background-color: #bfbfcb;
        display: flex;
        position: relative;
        margin: 14px 0px;
        margin-left: 0px;
        border-radius: 20px;
    }
    .messageRight{
        width: 900px;
    }
    .info{
        font-size: 10px;
        display: flex;
        margin-top: 10px;
        margin-bottom: 4px;
    }
    .info :first-child{
        margin-left: 10px;
        margin-right: 10px;
    }
    .talk{
        line-height: 36px;
        display: inline-block; 
        background-color: #d0cede;
        border-radius: 10px;
        padding-left: 10px;
        padding-right: 10px;
        margin-bottom: 20px;
    }
    .sjinfo{
        position: absolute;
        right: 40px;
        text-align: center;
        top: 50%;
        transform: translate(-50%,-50%);
    }
</style>
<script>
    import axios  from 'axios';
export default {
    data(){
        return{
            message: [1,2,3 ,4,5,6,7,8,9,10],
        }
    },
    mounted(){
        this.$nextTick(() => {
      // 在DOM更新后滚动至底部
      this.scrollToBottom();
    });
    },
    methods: {
        scrollToBottom() {
            // 获取标签底部的相对距离
            var distanceFromBottom = this.$el.getBoundingClientRect().bottom;
            // 设置页面滚动距离，使底部对齐
            window.scrollBy(0, distanceFromBottom);
            console.log(distanceFromBottom);
            window.addEventListener('load', () => {
                // 在页面加载完成后滚动至底部
                window.scrollTo(0, document.body.scrollHeight);
                console.log(document.body.scrollHeight);
            });
            console.log("阿达瓦");
        },
    },
    created() {}
}
</script>
